iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 20
0
Modern Web

JavaScript 從零開始系列 第 20

JavaScript 從零開始 - Day20 - 認識 for 迴圈

  • 分享至 

  • xImage
  •  

JavaScript Note

為什麼要用 for 迴圈

前面學習了陣列與物件的組合用法,在資料存取相對方便,但如果是大筆資料去做存取時,使用迴圈就可以避免大量的程式碼,比如說今天的專案是小專案,是做兩間養雞場的母雞資料,那這時候只要使用陣列跟物件就可以快速地取得兩間的母雞資料,可是今天如果是要做全台灣的養雞場,假如說有 100 間以上,光是陣列跟資料要取得的寫法就會看到滿滿的 console.log...

這時候 for 迴圈就可以幫助在同性質的條件中,存取母雞的資料。


for 迴圈的寫法

基本寫法:

for (var i = 0; i < array.length; i++) {
  //使用 for 迴圈 (初始狀態;條件;更新內容)
  console.log(i); //執行內容
}
  1. 初始狀態:可以自訂任何數字。
  2. 條件:設定要跑的條件長度或範圍。
  3. 更新內容:會依照給予的條件去跑該次數。
  4. for 後面的變數條件內容要用分號 ";" 隔開。

迴圈會判斷條件相符時開始執行,若條件不符就不會執行,如果跑完了也會停止執行。


學 JavaScript 必寫「九九乘法表」

來做一個綜合練習,會使用以下方法:

變數
innerHTML
for 迴圈
計算功能

建立一個 HTML 環境,這邊的 container 目的是讓畫面居中,為了讓九九乘法表呈現在 box 內,所以有設定了九個 box,

<body>
  <div class="container">
    <h1>九九乘法表</h1>
  </div>

  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</body>

設定兩個變數,a 為乘數, b 為被乘數,用陣列呈現資料,a 的乘數只有八個,原因是九九乘法表從 2 開始,

var a = [2, 3, 4, 5, 6, 7, 8, 9]; //乘數
var b = [1, 2, 3, 4, 5, 6, 7, 8, 9]; //被乘數
var el = document.querySelectorAll(".box"); //選取全部的 box

var aLen = a.length;
// console.log(aLen); 結果為 8
var bLen = b.length;
// console.log(bLen); 結果為 9

在來使用 for 迴圈來計算乘數被乘數

for (var i = 0; i < aLen; i++) {
  //乘數迴圈
  var str = ""; // 預計將結果填入 str
  for (var j = 0; j < bLen; j++) {
    //被乘數迴圈
    }

為什麼 b 的迴圈會包在 a 裡面呢?

因為是要用 a*b,讓 ba 裡面跑九次,創造出九九乘法表的效果,因為要兩者相乘後要有一個數值,所以設定 var str = "",在計算結果後要丟進 str

這個觀念很重要,要記起來。

再來就是要呈現九九乘法了,這時候來組標籤(變數加字串),a 陣列乘上 b 陣列,等於 ab 陣列相乘,當中相乘等於的符號是為了在網頁上呈現的,所以標示為字串。

var count = a[i] + "*" + b[j] + "=" + a[i] * b[j]; //組字串
// console.log(count); 結果為九九乘法表

為了讓 str 完整呈現 從 2*1=1 計算到 2*9=18 ,這時候就使用 str 加總的功能,把所有的組合完成後,變成 <p> 標籤,丟回 str 裡面

str += "<div>" + count + "</div>"; //將結果套回 str

最後,就在 b 的迴圈裡呈現所有 a 變數中九九乘法表跑完的結果,並把這個結果透過剛剛變數 str 的設定,渲染到網頁上。

el[i].innerHTML = str; // 將 box 裡的乘數,透過 innerHTML 渲染於網頁

這樣就透過 JavaScript 的語法,完成了九九乘法表了!

codepen: https://codepen.io/hnzxewqw/pen/rNVWRdR

優化

但是這樣會是一整排的數列,頁面會太長,為了讓畫面更好看,在 CSS 的 .box 中加入下方語法:

display: flex;
flex-direction: column;
flex-wrap: wrap;
padding: 70px 40px;

使數列橫向排列,並且垂直對齊,斷行的部分也按照寬度做斷行,在 padding 到喜歡的效果即可!


上一篇
JavaScript 從零開始 - Day19 - 控制判斷(if、else if、switch)
下一篇
JavaScript - 從零開始 - Day21 - for 迴圈 + array 陣列的使用方法
系列文
JavaScript 從零開始40
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言